<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from 'vue'
  import * as echarts from 'echarts'
  const currentWidth = document.documentElement.clientWidth - 300

  const props = defineProps({
    data: {
      type: Object,
    },
  })

  const chartDom = ref()
  // var chartDom = document.getElementById('main');
  let option = reactive({})

  const initOption = () => {
    const xAxisData = ref<any>([])
    const seriesData = ref<any>([])
    const data1 = ref<number[]>([])
    const data2 = ref<number[]>([])
    const data3 = ref<number[]>([])
    const data4 = ref<number[]>([])
    const dataList = reactive({})
    props.data[props.data.resStatusList[0]].forEach((item: any) => {
      xAxisData.value.push(item.reqTime.substr(11, 13))
    })
    props.data.resStatusList.forEach((item: any, index) => {
      dataList[item] = props.data[props.data.resStatusList[index]]
    })
    props.data.resStatusList.forEach((item: any, index) => {
      seriesData.value.push({
        name: item,
        type: 'bar',
        stack: 'one',
        data: props.data[item].map((item: any) => item.visits),
      })
      if(index===0){
        seriesData.value[0].itemStyle = {
          color: '#52C41A',
        }
      }
      if (index === props.data.resStatusList.length - 1) {
        seriesData.value[index].label = {
          show: true,
          position: 'top',
          formatter: (params) => {
            let total = 0
            for (let key in dataList) {
              if (dataList.hasOwnProperty(key)) {
                total += dataList[key][params.dataIndex].visits

              }
            }
            return total
          },
        }
      }
    })
    var emphasisStyle = {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.3)',
      },
    }
    option = {
      legend: {
        data: props.data.resStatusList,
        left: 'center',
      },
      tooltip: {},
      xAxis: {
        data: xAxisData.value,
        name: '访问时间',
        axisLine: { onZero: true },
        splitLine: { show: false },
        splitArea: { show: false },
      },
      yAxis: {
        name: '访问次数',
      },
      grid: {
        bottom: 50,
      },
      series: seriesData.value,
    }
  }

  const refresh = () => {
    if (props.data.resStatusList) {
      initOption()
      var myChart = echarts.init(chartDom.value)
      option && myChart.setOption(option, true)
    }
  }

  watch(
    () => props.data,
    () => {
      if (props.data) {
        refresh()
      }
    },
    {
      immediate: true,
    },
  )
</script>
<template>
  <!-- <a-button type="primary" @click="refresh()">刷新</a-button> -->
  <div id="main" ref="chartDom" :style="{ width: currentWidth + 'px', height: '800px' }"></div>
</template>
<style lang="less" scoped></style>
